<template>
  <el-dialog
    :model-value="dialogDetails"
    width="40%"
    title="设施详情"
    :before-close="handleClose"
  >
    <div
      v-loading="loading"
      element-loading-text="加载中..."
      class="dialog-content"
    >
      <el-divider />
      <!-- 添加表单内容 -->
      <el-form :model="form" label-width="120px">
        <el-form-item label="设施名称：" prop="name">
          <el-input v-model="form.name" disabled />
        </el-form-item>

        <el-form-item label="封面图片：" prop="coverUrl">
          <div class="image-preview" v-if="form.coverUrl">
            <img :src="form.coverUrl" class="preview-image" />
          </div>
          <div class="no-image" v-else>暂无图片</div>
        </el-form-item>
        <el-form-item label="视频URL：" prop="videoUrl">
          <el-input v-model="form.videoUrl" readonly />
        </el-form-item>

        <el-form-item label="设施介绍：" prop="intro">
          <div class="readonly-content" v-html="form.intro"></div>
        </el-form-item>

        <el-form-item label="发布状态：" prop="releaseStatus">
          <el-select v-model="form.releaseStatus" disabled>
            <el-option label="草稿" :value="0" />
            <el-option label="已发布" :value="1" />
          </el-select>
        </el-form-item>

        <el-form-item label="空间名称：" prop="spaceIdList">
          <el-select v-model="form.spaceIdList" multiple disabled>
            <el-option
              v-for="item in form.spaceNameList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup name="DetailsFacilityDialog">
import { ref, watch } from 'vue';
import { getFacilityDetails } from '@/api/Venue/facility';

const props = defineProps({
  dialogDetails: {
    type: Boolean,
  },
  DetailsFacilityId: {
    type: String,
  },
});

const emit = defineEmits(['cancel']);
const loading = ref(false);

// 初始化表单数据
const initialForm = {
  name: '',
  coverUrl: '',
  videoUrl: '',
  releaseStatus: '',
  intro: '',
  spaceIdList: [],
  spaceNameList: [],
};

const form = ref({ ...initialForm });

// 重置表单数据
const resetForm = () => {
  form.value = { ...initialForm };
};

// 获取设施详情
const getFacilityDetailsData = async () => {
  if (!props.DetailsFacilityId) return;
  loading.value = true;
  resetForm(); // 重置数据

  try {
    const res = await getFacilityDetails(props.DetailsFacilityId);
    if (res.data.code === 200) {
      const details = res.data.data;
      const spaceVOList = details.spaceVOList?.map((item) => item.name) || [];

      form.value = {
        name: details.name,
        coverUrl: details.coverUrl,
        videoUrl: details.media?.title || '暂无URL',
        releaseStatus: details.releaseStatus,
        intro: details.intro,
        spaceIdList: spaceVOList,
        spaceNameList: spaceVOList,
      };
    }
  } catch (error) {
    console.error('获取详情失败:', error);
  } finally {
    loading.value = false;
  }
};

// 监听弹窗和ID变化
watch(
  [() => props.dialogDetails, () => props.DetailsFacilityId],
  ([newDialog, newId], [oldDialog]) => {
    if (newDialog && newId) {
      getFacilityDetailsData();
    } else if (!newDialog && oldDialog) {
      // 关闭弹窗时重置数据
      resetForm();
    }
  }
);

// 处理取消按钮的点击事件
const handleCancel = () => {
  emit('cancel');
};

// 关闭对话框
const handleClose = () => {
  handleCancel();
};
</script>

<style lang="scss" scoped>
.dialog-content {
  position: relative;
  min-height: 100px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.image-preview {
  width: 120px;
  height: 120px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  overflow: hidden;

  .preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

.no-image {
  width: 120px;
  height: 120px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 14px;
}

.upload-box,
.upload-placeholder,
.delete-icon {
  display: none;
}

.readonly-content {
  padding: 12px;
  background-color: #f5f7fa;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  min-height: 200px;
  width: 100%;
  overflow-y: auto;
  line-height: 1.5;
  color: #606266;

  :deep(p) {
    margin: 0;
    padding: 0;
  }

  :deep(img) {
    max-width: 100%;
  }
}

// 调整表单项宽度
:deep(.el-form-item__content) {
  width: calc(100% - 120px);
}
</style>
